﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link id="page_favicon" href="images/icon.ico" rel="icon" type="image/x-icon">
    <title>ToDo</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">	
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<div id="wraper">
		<div class="header">
			<div class="border">&nbsp;</div>
			<div class="title"><span>ToDoリスト</span></div>
		</div>
		<div class="menu"><!-- menu -->
			<table>
				<tr>
					<td>
						<ul>
							<li class="selected"><a href="#">一覧</a></li>
							<li><a href="create-todo.html">新規作成</a></li>
						</ul>
					</td>
				</tr>
			</table>
		</div> <!-- end menu -->
		<!-- container -->
		<div class="container">
			<div class="tab"><!--tab -->
				<ul class="submenu">
					<li class="selected"><a href="index.html">ToDo</a></li>
					<li><a href="complete-list.html">完了</a></li>
				</ul>
				<ul class="help">
					<li><a href="#"><img src="images/help.png"/></a></li>
				</ul>
			</div><!-- end tab -->
			
			<div class="contain">
				<div class="contain-sub">
					<div id="message-box"></div>
					<div class="div-button"> <!-- button -->
						<input type="button" value="すべて選択" id="select-all-1">	
						<input type="button" value="すべて解除" id="unselect-all-1">	
						<input type="button" value="完了" id="complete-1">	
						<input type="button" value="削除" id="delete-1">	
					</div> <!-- end button -->
					<div class="main">
						<div class="pagging">
							<span>全7件中  1~5件表示</span>
							<select>
								<option value="1">1/ページ</option>
								<option value="10">10/ページ</option>
								<option value="20">20/ページ</option>
								<option value="50">50/ページ</option>
								<option value="100">100/ページ</option>
								<option value="all">すべて</option>
							</select>
							<span class="page">
								<a href="#">&lt;</a>
								<a href="#">-</a>
								<a href="#">-</a>
								<a href="#" class="active">1</a>
								<a href="#">-</a>
								<a href="#">-</a>
								<a href="#">&gt;</a>
							</span>
						</div>
						<div class="data" id="data">
							<table>
								<tr>
									<th><div>選択</div></th>
									<th><div>タイトル</div></th>
									<th><div>期限</div></th>
									<th><div>優先度</div></th>
									<th><div>コメント</div></th>
								</tr>
								<tr id="todo-1">
									<td class='c'><input type="checkbox" id="check-1"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-2">
									<td class='c'><input type="checkbox"/ id="check-2"></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-3">
									<td class='c'><input type="checkbox" id="check-3"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-4">
									<td class='c'><input type="checkbox" id="check-4"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-5">
									<td class='c'><input type="checkbox" id="check-5"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-6">
									<td class='c'><input type="checkbox" id="check-6"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
								<tr id="todo-7">
									<td class='c'><input type="checkbox" id="check-7"/></td>
									<td class='l'><a href="#" class="tooltip">項目に値が入力されているかチェック
										<span>
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック<br />
											項目に値が入力されているかチェック	
										</span>	
									</a>
									</td>
									<td class='l'>2012-10-10 00:00:00</td>
									<td class='c'>高</td>
									<td class='c'>項目に値が入力されているかチェック</td>
								</tr>
							</table>
						</div>
						<div class="pagging">
							<span>全7件中  1~5件表示</span>
							<select>
								<option value="1">1/ページ</option>
								<option value="10">10/ページ</option>
								<option value="20">20/ページ</option>
								<option value="50">50/ページ</option>
								<option value="100">100/ページ</option>
								<option value="all">すべて</option>
							</select>
							<span class="page">
								<a href="#">&lt;</a>
								<a href="#">-</a>
								<a href="#">-</a>
								<a href="#" class="active">1</a>
								<a href="#">-</a>
								<a href="#">-</a>
								<a href="#">&gt;</a>
							</span>
						</div>
					</div>	
					<div class="div-button"> <!-- button -->
						<input type="button" value="すべて選択" id="select-all-2">	
						<input type="button" value="すべて解除" id="unselect-all-2">	
						<input type="button" value="完了" id="complete-2">	
						<input type="button" value="削除" id="delete-2">		
					</div> <!-- end button -->
				</div>
				
			</div>
		</div><!-- end container -->	
	</div>
	
	<script>
		jQuery(document).ready(function(){
			// check all
			jQuery('#select-all-1').click(function(){
				$("#data input[type=checkbox]").attr('checked','checked');
			});
			jQuery('#select-all-2').click(function(){
				$("#data input[type=checkbox]").attr('checked','checked');
			});
			/***/
			// un check
			jQuery('#unselect-all-1').click(function(){
				$("#data input[type=checkbox]").removeAttr('checked');
			});
			jQuery('#unselect-all-2').click(function(){
				$("#data input[type=checkbox]").removeAttr('checked');
			});
			// delete action 
			jQuery('#delete-1').click(function(){
				deleteTodo();
			});
			jQuery('#delete-2').click(function(){
				deleteTodo();
			});
			//
			jQuery('#data input:checkbox').click(function(){
				if (jQuery(this).is(':checked')) {
					jQuery('#message-box').html("");
				}
			});
		});
		
		function deleteTodo() {
			jQuery('#message-box').html("");
			var checked = $("#data input[type=checkbox]:checked");
			if (checked.length > 0) {
				for (var i=0; i<checked.length; i++) {
					jQuery("#todo-"+ checked[i].id.split('-').pop()).remove();
				}
			} else {
				jQuery('#message-box').html('<div class="message-error" id="message-error"><div class="warning">ToDoリストを選択して下さい。</div></div>');
			}
		}
	</script>
</body>
</htm>
